import React, { useState } from 'react'
import { Table, Button, Space, Select } from 'antd'

export default function SubcontractSuppliers() {
  const [dataSource, setDataSource] = useState([
    {
      key: '1',
      name: '分包供应商1',
      phone: '18112345678',
      station: '前端',
      remarks: '111'
    },
    {
      key: '2',
      name: '分包供应商2',
      phone: '18112345678',
      station: '后端',
      remarks: '222'
    }
  ])

  const [selectedSupplier, setSelectedSupplier] = useState(undefined)
  const [filteredData, setFilteredData] = useState(dataSource)

  // 获取所有供应商名称用于下拉框1111
  const supplierOptions = dataSource.map(item => ({
    value: item.name,
    label: item.name
  }))

  // 搜索功能
  const handleSearch = () => {
    if (selectedSupplier) {
      const filtered = dataSource.filter(item => item.name === selectedSupplier)
      setFilteredData(filtered)
    } else {
      setFilteredData(dataSource)
    }
  }

  // 重置搜索
  const handleReset = () => {
    setSelectedSupplier(undefined)
    setFilteredData(dataSource)
  }

  const columns = [
    {
      title: '供应商名称',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      key: 'phone'
    },
    {
      title: '岗位',
      dataIndex: 'station',
      key: 'station'
    },
    {
      title: '备注',
      dataIndex: 'remarks',
      key: 'remarks'
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type="link" size="small">编辑</Button>
          <Button type="link" size="small" danger>删除</Button>
        </Space>
      )
    }
  ]

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20, border: '1px solid #eee', borderRadius: 4, padding: '10px 16px', background: '#fff' }}>
        <div style={{ fontWeight: 500, fontSize: 16 }}>分包供应商管理</div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Button type="primary" style={{ background: '#F6B657', borderColor: '#F6B657', color: '#fff' }} onClick={()=>setIsModalOpen(true)}>添加分包供应商</Button>
          <Button >导入</Button>
          <Button >导出</Button>
          <Button >下载模板</Button>
        </div>
      </div>
      
      {/* 搜索区域 */}
      <div style={{ marginBottom: 16, padding: '16px', background: '#fafafa', borderRadius: 4, border: '1px solid #d9d9d9' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ fontWeight: 500 }}>供应商名称：</span>
          <Select
            style={{ width: 200 }}
            placeholder="请选择供应商名称"
            value={selectedSupplier}
            onChange={setSelectedSupplier}
            allowClear
            options={supplierOptions}
          />
          <Button type="primary" onClick={handleSearch}>查询</Button>
          <Button onClick={handleReset}>重置</Button>
        </div>
      </div>

      <Table 
        dataSource={filteredData} 
        columns={columns} 
        pagination={{
          total: filteredData.length,
          pageSize: 5,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `共 ${total} 条`
        }}
      />
    </div>
  )
}
